<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 教室模拟</title>
<link href="../css/all.css" rel="stylesheet" type="text/css" />
<link href="../css/jquery-ui-1.9.2.custom.css" rel="stylesheet" type="text/css" />
<script src="../ref/jquery-1.8.3.js" type="text/javascript"></script>
<script src="../ref/jquery-ui-1.9.2.custom.js"></script>
<style type="text/css">
	body{width:1005px;}
	#classroom{margin:0 auto;width:800px;  }
	#teacher_table{
	background: #CEBF98;
	color:#333333;
	width: 171px;
	height: 38px;
	margin:0 auto;
	line-height: 38px; 
	text-align: center;

}	
	
	#table_place {margin-left: auto; margin-right: auto; margin-top: 10px;}
	#table_place table{  }
	#table_place table tr{ background:#D6B881; }
	#table_place table td{  border-bottom:#FFFFFF solid 8px; width:35px; height:25px; border-left:#FFFFFF 2px solid; cursor:pointer;}
	.space{ border-right:#FFFFFF 10px solid;}
	.broken{ background:#858585;}
	.empty{ background: #FFFFFF;}
</style>

<script type="text/javascript">
	$(function(){
		
		initAll();	
			
    });
	//教师方法总集合
	function initAll(){
		$.post("inittable",{classroom_id:"1"},function(json){
			if(json["msg"]!=null){
				alert(json["msg"]);
				return;
			}
			table_create(json["hang"],json["lie"]);
			isbroken(json["broken"]);			
			isempty(json["empty"]);
			addspace(json["space"]);
			//获取tabel宽度 并，赋值div classroom	
			$("#classroom").width($("#table_place table").width());
			
		});
	}
	
	//创建课桌
	function table_create(hang,lie){
		if(hang==null||lie==null)
			return;
		var str="";
		for(var i=1; i<=hang;i++){
			str+="<tr>";
			for(var j=1;j<=lie;j++){
			str+="<td onclick=\"duihua("+i+","+j+")\"></td>";
			}
			str+="</tr>";
		}
		$("#table_place table").append(str);
	};
	
	//增加空格,相当于增加走道
	function addspace(str){
		if(str == null)
			return;
		var attr = parseStringToPosition(str);		
		for(var i in attr){
			$("#table_place table tr td:nth-child("+attr[i]+")").addClass("space");
		} 
		
	};

	
	//表明第几个座位是坏的,arr为类似 “10:20,30:10,1:3”的东西 需再拆分成行列
	function isbroken(arr){
		if(arr == null)
			return;
		var position_array = parseStringToPosition(arr);
		for(var i in position_array){
			position = position_array[i].split(":");
			$("#table_place table tr:nth-child("+position[0]+") td:eq("+(parseInt(position[1])-1)+")").addClass("broken");
		}
		
	};
	//第几个 是空的,arr为类似 “10:20,30:10,1:3”的东西 需再拆分成行列
	function isempty(arr){
		if(arr == null)
			return;
		var position_array = parseStringToPosition(arr);
		for(var i in position_array){
			position = position_array[i].split(":");
			$("#table_place table tr:nth-child("+position[0]+") td:eq("+(parseInt(position[1])-1)+")").addClass("empty");
		}
	};
	//将字符串变为 位置数组 。数组类似{"10:20","30:10"}
	function parseStringToPosition(str){
		var arr = str.split(",");
		return arr;
	};
	//点击 桌子弹出对话框。。
	function duihua(hang,lie){
		var isBroken =$("#table_place table tr:nth-child("+hang+") td:eq("+(lie-1)+")").hasClass("broken");
		var isEmpty = $("#table_place table tr:nth-child("+hang+") td:eq("+(lie-1)+")").hasClass("empty");
		if(isEmpty){
			alert("空闲的不能修改");
			return;
		}
		var str="确定将第"+hang+"行，第"+lie+"列修改为";
		if(isBroken){
			str=str+"状态良好的!";
		}else{
			str=str+"已经损坏的！";
		}
		$('#init_dialog p').append(str);
		str="";
		$('#init_dialog').dialog({
			modal: true,
			resizable:false,
      		buttons: {
        		'确定': function() {
					$.post("change_dis",{hang:hang,lie:lie,isBroken:isBroken,classroom_id:"1"},				                 	
						function(json){
							if(json["msg"]!=null){
								alert(json["msg"]);
							}
					});
					$('#init_dialog p').html('');
					$('table').html('');
					//等待 .1秒后刷新，否则会产生同步问题
					setTimeout('initAll()',100);
          			$( this ).dialog("close");
       			},
				'取消': function() {
					$('#init_dialog p').html('');
          			$( this ).dialog( "close" );
				},
				'座位为空':function(){
					$.post("change_empty",{hang:hang,lie:lie,isBroken:isBroken,classroom_id:"1"},				                 	
							function(json){
								if(json["msg"]!=null){
									alert(json["msg"]);
								}
					});
					$('#init_dialog p').html('');
					$('table').html('');
					//等待 .1秒后刷新，否则会产生同步问题
					setTimeout('initAll()',100);
          			$( this ).dialog( "close" );	
				}
      		}
		});
	};
	
	
</script>
</head>
<body>

	<div id="classroom">
    	<div id="teacher_table"><span>讲台</span></div>
        <div id="table_place">
          <table cellspacing="0">           
          </table>
        </div>
	</div>
    <div id="init_dialog" title="确认">
    	<p></p>
    </div>
</body>
</html>